<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KityMinder Example</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" >
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="src/kityminder.css" rel="stylesheet">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #minder-view {
            position: absolute;
            border: 1px solid #ccc;
            left: 10px;
            top: 10px;
            bottom: 10px;
            right: 10px;
        }
    </style>

    <script type="text/javascript" src="node_modules/kity/dist/kity.js"></script>
</head>
<body>
    <script id="minder-view" type="application/kityminder" minder-data-type="json">
    {
        "root": {
            "data": {
                "color": "red",
                "text": "百度产品"
            },
            "children": [
                { "data": { "text": "新闻" },        "children": [
                {
                  "data": {
                    "text": "提单号3\n上家卡号/下家卡号\n牌号1/107",
                    "type": 1
                  },
                  "children": [
                    {
                      "data": {
                        "text": "提单号4\n上家卡号/下家卡号\n牌号1/107",
                        "type": 2,
                        "background": "#eee"
                      },
                      "children": [
                          {
                            "data": {
                              "text": "提单号5\n上家卡号/下家卡号\n牌号1/107",
                              "type": 3
                            },
                            "children": [
                              {
                                "data": {
                                  "text": "提单号5\n上家卡号/下家卡号\n牌号1/107",
                                  "type": 0
                                },
                                "children": []
                              }
                            ]
                          }
                      ]
                    },
                    {
                      "data": {
                        "text": "提单号5\n上家卡号/下家卡号\n牌号1/107",
                        "type": 3
                      },
                      "children": [
                        {
                          "data": {
                            "text": "提单号5\n上家卡号/下家卡号\n牌号1/107",
                            "type": 0
                          },
                          "children": []
                        }
                      ]
                    },
                    {
                      "data": {
                        "text": "提单号5\n上家卡号/下家卡号\n牌号1/107",
                        "type": 0
                      },
                      "children": []
                    }
                  ]
                }
              ] },
                { "data": { "text": "网页", "priority": 1 } },
                { "data": { "text": "贴吧", "priority": 2 } },
                { "data": { "text": "知道", "priority": 2 } },
                { "data": { "text": "音乐", "priority": 3 } },
                { "data": { "text": "图片", "priority": 3 } },
                { "data": { "text": "视频", "priority": 3 } },
                { "data": { "text": "地图", "priority": 3 } },
                { "data": { "text": "百科", "priority": 3 } },
                { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
            ]
        },
        "template": "right",
        "theme": "qt",
        "version": "1.4.43"        
    }
    </script>
</body>

<script type="text/javascript" src="dist/kityminder.core.js"></script>
<script type="text/javascript">
    // 创建 km 实例
    /* global kityminder */
    function hsl(h, s, l) {
        return kity.Color.createHSL(h, s, l);
    }

    kityminder.Theme.register('qt', {
        'background': '#fbfbfb',

        'root-color': 'black',
        'root-background': hsl(204, 33, 95),
        'root-stroke': hsl(204, 37, 60),
        'root-stroke-width': 1,
        'root-font-size': 14,
        'root-padding': [6, 20],
        'root-margin': 8 ,
        'root-radius': 3,
        'root-space': 5,

        'main-color': 'black',
        'main-background': hsl(204, 33, 95),
        'main-stroke': hsl(204, 37, 60),
        'main-stroke-width': 1,
        'main-font-size': 14,
        'main-padding': [6, 20],
        'main-margin': 8 ,
        'main-radius': 3,
        'main-space': 5,

        'sub-color': 'black',
        'sub-background': hsl(204, 33, 95),
        'sub-stroke': hsl(204, 37, 60),
        'sub-font-size': 12,
        'sub-padding': [3, 5],
        'sub-margin': [4, 8],
        'sub-radius': 5,
        'sub-space': 5,

        'connect-color': hsl(204, 37, 60),
        'connect-width': 1,
        'connect-radius': 5,

        'selected-stroke': hsl(204, 26, 30),
        'selected-stroke-width': '3',
        'blur-selected-stroke': hsl(204, 10, 60),

        'marquee-background': hsl(204, 100, 80).set('a', 0.1),
        'marquee-stroke': hsl(204, 37, 60),

        'drop-hint-color': hsl(204, 26, 35),
        'drop-hint-width': 5,

        'order-hint-area-color': hsl(204, 100, 30).set('a', 0.5),
        'order-hint-path-color': hsl(204, 100, 25),
        'order-hint-path-width': 1,

        'text-selection-color': hsl(204, 100, 20),
        'line-height':1.5
    })
    

    var json = JSON.parse(document.querySelector('#minder-view').textContent)
    var km = window.km = new kityminder.Minder({
        enableAnimation: false,
        renderTo: '#minder-view',
        // theme: 'qt'
    });    
    // console.log(json)
    km.importJson(json)
    // km.useTheme('qt')
    window.drag = km.getViewDragger()
    setTimeout(() => {
        drag.setEnabled(true)
        drag.moveTo(new kity.Point(50, 300))
    }, 0)    
    
    // km.disable();
    // km.execCommand('hand');
</script>

</html>
